<template>
  <div class="app-container fundodoo-container ">
    <div class="fundodoo-goods-edit-container">
      <el-form ref="form" :model="form" size="small" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item required label="分类">
              <el-select v-model="form.cateId" placeholder="请选择商品分类">
                <el-option
                  v-for="item in allClassification"
                  :key="item.id"
                  :label="'|---'.repeat(item.level) + item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮费">
              <el-input-number v-model="form.postage" :precision="2" :step="0.1" :min="0" :max="999" />
              <!-- <el-input v-model="form.postage" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="虚拟销量">
              <el-input-number v-model="form.ficti" :precision="0" :step="1" :min="0" :max="999" />
              <!-- <el-input v-model="form.ficti" /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item required label="名称">
              <el-input v-model="form.storeName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required label="单位">
              <el-input v-model="form.unitName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="简介">
              <el-input v-model="form.storeInfo" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item class="fundodoo-picture" required label="主图(305x305px)">
              <el-input v-model="form.image" type="hidden" />
              <FundodooPicture :storage-pic="form.image" @select-change="setImage" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item class="fundodoo-picture" required label="轮播图(640x640px)">
              <el-input v-model="form.sliderImage" type="hidden" />
              <FundodooPicture :storage-pic="form.sliderImage" :max-selected="5" @select-change="setSliderImage" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item required label="售价">
              <el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0" :max="99999" />
              <!-- <el-input v-model="form.price" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required label="市场价">
              <el-input-number v-model="form.otPrice" :precision="2" :step="0.1" :min="0" :max="99999" />
              <!-- <el-input v-model="form.otPrice" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="赠送积分">
              <el-input-number v-model="form.giveIntegral" :precision="2" :step="0.1" :min="0" :max="999" />
              <!-- <el-input v-model="form.giveIntegral" /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item required label="库存">
              <el-input-number v-model="form.stock" :precision="0" :step="1" :min="0" :max="99999999" />
              <!-- <el-input v-model="form.stock" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required label="成本价">
              <el-input-number v-model="form.cost" :precision="2" :step="0.01" :min="0" :max="99999999" />
              <!-- <el-input v-model="form.cost" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序">
              <el-input-number v-model="form.sort" :precision="0" :step="1" :min="1" :max="99999" />
              <!-- <el-input v-model="form.sort" /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-radio-group v-model="form.showp">
                <el-radio :label="true">上架</el-radio>
                <el-radio :label="false">下架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="热卖">
              <el-radio-group v-model="form.hot">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="促销">
              <el-radio-group v-model="form.benefit">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="精品">
              <el-radio-group v-model="form.best">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="新品">
              <el-radio-group v-model="form.newp">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包邮">
              <el-radio-group v-model="form.shipping">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="fundodoo-edit-actions">
          <el-button size="small" type="primary" @click="onSubmit">保存</el-button>
          <el-button size="small" @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>

<script>
import { FundodooPicture } from '../../components'
import { goodsCategoryTree } from '@/api/goodsCategory'
import { addGoods, updateGoods, findById } from '@/api/goods'

export default {
  components: {
    FundodooPicture
  },
  data() {
    return {
      form: {
        id: null,
        cateId: null,
        storeName: '',
        unitName: '件',
        keyword: null,
        storeInfo: null,
        image: '',
        sliderImage: '',
        price: 98,
        otPrice: 0,
        giveIntegral: 0,
        postage: 8,
        sales: 0,
        ficti: 198,
        stock: 998,
        cost: 0.0,
        sort: 5198,
        showp: true,
        hot: false,
        benefit: false,
        best: true,
        newp: true,
        shipping: false
      },

      allClassification: []
    }
  },
  beforeCreate() {

  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.fetchAllClassification()
      this.findGoodsById()
    })
  },
  methods: {
    fetchAllClassification() {
      goodsCategoryTree().then(res => {
        const tmpAll = []
        for (let i = 0, len = res.data.length; i < len; i++) {
          const tmp = res.data[i]
          tmp.level = 1
          tmpAll.push(tmp)
          for (let j = 0, cLen = tmp.children.length; j < cLen; j++) {
            const ctmp = tmp.children[j]
            ctmp.level = 2
            tmpAll.push(ctmp)
          }
        }
        this.allClassification.length = 0
        this.allClassification = tmpAll
      })
    },
    findGoodsById() {
      if (this.$route.name === 'goods-edit') {
        const gid = this.$route.params.id
        if (isNaN(gid)) {
          this.$message('参数有误!')
          this.$router.go(-1)
          return
        }
        findById(gid).then(res => {
          this.form.id = res.data.id
          this.form.cateId = res.data.cateId
          this.form.storeName = res.data.storeName
          this.form.unitName = res.data.unitName
          this.form.keyword = res.data.keyword
          this.form.storeInfo = res.data.storeInfo
          this.form.image = res.data.image
          this.form.sliderImage = res.data.sliderImage
          this.form.price = res.data.price
          this.form.otPrice = res.data.otPrice
          this.form.giveIntegral = res.data.giveIntegral
          this.form.postage = res.data.postage
          this.form.sales = res.data.sales
          this.form.ficti = res.data.ficti
          this.form.stock = res.data.stock
          this.form.cost = res.data.cost
          this.form.sort = res.data.sort
          this.form.showp = res.data.showp
          this.form.hot = res.data.hot
          this.form.benefit = res.data.benefit
          this.form.best = res.data.best
          this.form.newp = res.data.newp
          this.form.shipping = res.data.shipping
        })
      }
    },
    setImage(image) {
      if (image.length > 0) {
        this.form.image = `${image[0].value}?${image[0].id}`
      } else {
        this.form.image = null
      }
    },
    setSliderImage(images) {
      const tmpSliderImage = []
      let tmpImg = {}
      for (let i = 0, len = images.length; i < len; i++) {
        tmpImg = images[i]
        tmpSliderImage.push(`${tmpImg.value}?${tmpImg.id}`)
      }
      this.form.sliderImage = tmpSliderImage.join(process.env.VUE_APP_BASE_SEPARATION)
    },
    onSubmit() {
      if (this.form.id === null) {
        // add
        addGoods(this.form).then(res => {
          this.goGoodsList()
        })
      } else {
        // update
        updateGoods(this.form).then(res => {
          this.goGoodsList()
        })
      }
    },
    onCancel() {
      this.goGoodsList()
      // this.$message({
      //   message: 'cancel!',
      //   type: 'warning'
      // })
    },
    goGoodsList() {
      this.$router.push({ name: 'goods-list' })
    }
  }
}
</script>

<style scoped>

    .fundodoo-goods-edit-container {
        height: 100%;
        width: 100%;
        background-color: #FFF;
        border: 1px solid #F3f3f3;
    }

    .fundodoo-container {
        justify-content: flex-start;
    }
    .fundodoo-container .el-form-item--small.el-form-item {
        margin-bottom: 8px;
    }
    .form-3-item {
        opacity: unset;
    }

</style>
<style>
    .fundodoo-goods-edit-container .el-form-item__label {
        font-weight: normal;
    }
</style>
